<script setup lang="ts">
import { reactive } from "vue";
import dayjs from "dayjs";
import type { DateDataType } from "./index.d";
import { useSettingStore } from "@/stores/index";

const dateData = reactive<DateDataType>({
    dateDay: "",
    dateYear: "",
    dateWeek: "",
    timing: {
        hasRef: function (): boolean {
            throw new Error("Function not implemented.");
        },
        refresh: function (): NodeJS.Timer {
            throw new Error("Function not implemented.");
        },
        /// <reference types="d:/job/crmeb-dashboard/node_modules/.vue-global-types/vue_3.4_0.d.ts" />
        /// <reference types="d:/job/crmeb-dashboard/node_modules/.vue-global-types/vue_3.4_0.d.ts" />
        /// <reference types="d:/job/crmeb-dashboard/node_modules/.vue-global-types/vue_3.4_0.d.ts" />
        [/// <reference types="d:/job/crmeb-dashboard/node_modules/.vue-global-types/vue_3.4_0.d.ts" />
        Symbol.toPrimitive]: function (): number {
            throw new Error("Function not implemented.");
        },
        ref: function (): NodeJS.Timer {
            throw new Error("Function not implemented.");
        },
        unref: function (): NodeJS.Timer {
            throw new Error("Function not implemented.");
        },
    },
});

const { setSettingShow } = useSettingStore();
const weekday = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
const timeFn = () => {
    dateData.timing = setInterval(() => {
        dateData.dateDay = dayjs().format("YYYY-MM-DD hh : mm : ss");
        dateData.dateWeek = weekday[dayjs().day()];
    }, 1000);
};
timeFn();
</script>

<template>
    <div class="d-flex jc-center title_wrap">
        <div class="guang"></div>
        <div class="d-flex jc-center">
            <div class="title">
                <span class="title-text">共生优选可视化数据平台</span>
            </div>
        </div>
        <div class="timers">
            {{ dateData.dateYear }} {{ dateData.dateWeek }} {{ dateData.dateDay }}
            <div class="setting_icon" @click="setSettingShow(true)">
                <img src="@/assets/img/headers/setting.png" alt="设置" />
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.title_wrap {
    height: 60px;
    background-image: url("../assets/image/ispt-top.png");
    background-size: cover;
    background-position: center center;
    position: relative;
    margin-bottom: 4px;
    .guang {
        position: absolute;
        bottom: -26px;
        // background-image: url("../assets/img/guang.png");
        background-position: 80px center;
        width: 100%;
        height: 56px;
    }

    .timers {
        position: absolute;
        right: 0;
        top: 30px;
        font-size: 18px;
        display: flex;
        align-items: center;
        z-index: 101;
        .setting_icon {
            width: 20px;
            height: 20px;
            cursor: pointer;
            margin-left: 12px;

            img {
                width: 100%;
                height: 100%;
            }
        }
    }
}

.title {
    position: relative;
    // width: 500px;
    text-align: center;
    background-size: cover;
    color: transparent;
    height: 60px;
    line-height: 46px;

    .title-text {
        font-size: 38px;
        font-weight: 900;
        letter-spacing: 6px;
        width: 100%;
        background: linear-gradient(92deg, #0072ff 0%, #00eaff 48.8525390625%, #01aaff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}
</style>
